
<template>
  <div>
    <Row style="margin-top: 10px;">
      <Col span="5">
        <span style="">姓名：</span>
        <Input style="width: 70%;" v-model="searchInfo.name" />
      </Col>
      <Col span="5">
        <span style="">身份证号：</span>
        <Input style="width: 70%;" v-model="searchInfo.idcard" />
      </Col>
      <Col span="5">
        <span style="">银行卡号：</span>
        <Input style="width: 70%;" v-model="searchInfo.bankcardno" />
      </Col>
    </Row>
    <Row style="margin-top: 10px;">
      <Col span="5" >
        <span>所在区县：</span>
        <Select v-model="searchInfo.area" filterable transfer="" style="width: 70%;" @on-change="getRegionList(searchInfo.area, 1)">
          <Option :value="item.CPSR001" v-for="item in reginList[0]" v-bind:key="item.CPSR001">{{item.CPSR002}}</Option>
        </Select>
      </Col>
      <Col span="5">
        <span>所在街道：</span>
        <Select v-model="searchInfo.street" filterable transfer="" style="width: 70%;" @on-change="getRegionList(searchInfo.street, 2)">
          <Option :value="item.CPSR001" v-for="item in reginList[1]" v-bind:key="item.CPSR001">{{item.CPSR002}}</Option>
        </Select>
      </Col>
      <Col span="5">
        <span>所在社区：</span>
        <Select v-model="searchInfo.community" filterable transfer="" style="width: 70%;" >
          <Option :value="item.CPSR001" v-for="item in reginList[2]" v-bind:key="item.CPSR001">{{item.CPSR002}}</Option>
        </Select>
      </Col>
    </Row>
    <Row style="margin-top:10px;margin-left: 10px">
      <Col span="4">
        <Button class="new-btn-sty" @click="init">
          <Icon type="ios-search" /> 查询
        </Button>
        <Button class="new-btn-sty" @click="searchDatawork">
          <Icon type="success" /> 重置
        </Button>
      </Col>
    </Row>
    <Card class="card_style" style="margin-top: 10px" :bordered="false" :dis-hover="true">
      <Table border :columns="columns1" :data="datalist"></Table>
      <Row v-if="loadData === true">
        <Col class="demo-spin-col" span="8" offset="8">
          <Spin fix>
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>数据正在加载</div>
          </Spin>
        </Col>
      </Row>
      <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style" show-total  show-sizer @on-page-size-change="size"/>
    </Card>
  </div>
</template>

<script>
import {findcompensationdetaillist, getRegionList} from '@/api/eventlist'

export default {
  name: 'compensationdetail',
  data () {
    return {
      searchInfo: {},
      reginList: [[], [], []],
      modal_loading: false,
      paramData1: {},
      loadData: true,
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      paramData: {},
      columns1: [
        { title: '街道', key: 'street', width: 140, align: 'center' },
        { title: '社区', key: 'community', width: 140, align: 'center' },
        { title: '姓名', key: 'name', width: 200, align: 'center' },
        { title: '岗位', key: 'job', width: 200, align: 'center' },
        { title: '身份证号', key: 'idcard', width: 200, align: 'center' },
        { title: '银行卡号', key: 'bankcardno', width: 200, align: 'center' },
        { title: '应发金额', key: 'shouldpaysalary', width: 200, align: 'center' },
        { title: '养老保险', key: 'ageinsurance', width: 200, align: 'center' },
        { title: '医疗保险', key: 'medicalinsurance', width: 200, align: 'center' },
        { title: '失业保险', key: 'unemploymentinsurance', width: 200, align: 'center' },
        { title: '公积金', key: 'reserve', width: 200, align: 'center' },
        { title: '代扣合计', key: 'withholdingtotal', width: 200, align: 'center' },
        { title: '实发金额', key: 'infactgrantsalary', width: 200, align: 'center' }
      ],
      datalist: []
    }
  },
  methods: {
    init (param) {
      let params = {
        'name': this.searchInfo.name,
        'idcard': this.searchInfo.idcard,
        'area': this.searchInfo.area,
        'street': this.searchInfo.street,
        'community': this.searchInfo.community,
        'bankcardno': this.searchInfo.bankcardno,
        'pageNo': this.currentPageNo,
        'pageSize': this.currentPageSize
      }
      findcompensationdetaillist(params).then(res => {
        console.log(res)
        console.log(params)
        if (res.data.errcode === 0) {
          console.log(res)
          this.datalist = res.data.data.results
          this.totalnum = res.data.data.totalRecord
          this.loadData = false
        } else {
          this.loadData = true
          this.$Notice.error({ title: '获取列表失败', desc: res.data.errmsg })
        }
      })
    },
    change (pageNo) {
      this.currentPageNo = pageNo
      let param = {
      }
      this.init(param)
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.change()
    },
    searchDatawork () {
      this.searchInfo = {}
      this.init()
    },
    getRegionList (id, index) {
      getRegionList({ id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.reginList[index] = res.data.data
          this.$forceUpdate()
        } else {
          this.$Notice.error({
            title: '获取区域列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
  },
  mounted () {
    let param = {
    }
    this.init(param)
    this.getRegionList('', 0)
  }
}
</script>
<style>
.card_style {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0px;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
.bench_search {
  margin-bottom: 10px;
}
.nopadding .ivu-table-cell {
  padding: 0px 0px;
}
.code-img1 {
  height: 60%;
  width: 90%;
  margin-left: 5%;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
</style>
